import React, { useState } from "react";
import { useSearchParams } from "react-router-dom";
import style from "./style.module.scss";
import { MyHeader, MyTagdisease } from "../../../components";
import {
  getpathentCircleDetail,
  pathentCircleDetailDataStart,
  postComment,
} from "../../../api/patientCircle";
import { useRequest } from "ahooks";
import { dateFormat } from "../../../utils/formatTime";
const Index: React.FC = () => {
  const [searchParams] = useSearchParams();
  const sickCircleId = Number(searchParams.get("sickCircleId"));
  const [mask, setMask] = useState("none");
  const [value, setValue] = useState<string>("");
  /************************ 请求 *********************************/
  // 获取数据
  const {
    data: detailData = {
      id: 0,
      userId: 0,
      authorName: "",
      title: "",
      departmentId: 0,
      departmentName: "",
      disease: "",
      detail: "",
      treatmentHospital: "",
      treatmentStartTime: 0,
      treatmentEndTime: 0,
      treatmentProcess: "",
      picture: "",
      amount: 0,
      content: "",
      whetherContent: 2,
    },
    run,
  } = useRequest<pathentCircleDetailDataStart, []>(async () => {
    const resp = await getpathentCircleDetail({ sickCircleId });
    return resp.result;
  });
  const answer = () => {
    setMask("block");
  };
  const sendComment = async () => {
    const resp = await postComment({ sickCircleId, content: value });
    console.log(resp);
    setMask("none");
    run();
  };
  return (
    <div className={style.detail}>
      <div className={style.header}>
        <MyHeader title={detailData.title}></MyHeader>
      </div>
      <div className={style.content}>
        <div className={style.content_text}>
          <p className={style.adoptNickName}>{detailData.authorName}</p>
          <MyTagdisease title="病症" disease="123"></MyTagdisease>
          <MyTagdisease
            title="科室"
            disease={detailData.departmentName}
          ></MyTagdisease>
          <MyTagdisease
            title="病症详情"
            disease={detailData.disease}
          ></MyTagdisease>
          <MyTagdisease
            title="治疗经历"
            treatmentHospital={detailData.treatmentHospital}
            timer={`${dateFormat(
              detailData.treatmentStartTime,
              "yyyy.MM.dd"
            )}-${dateFormat(detailData.treatmentEndTime, "MM.dd")}`}
            disease={detailData.treatmentProcess}
          ></MyTagdisease>
          <MyTagdisease
            title="相关图片"
            picture={detailData.picture}
          ></MyTagdisease>
        </div>
      </div>
      <div className={style.footer}>
        {detailData.whetherContent === 2 ? (
          <div className={style.footerbtn}>
            <div className={style.amount}>{detailData.amount}H币</div>
            <button onClick={answer}>我来解答</button>
          </div>
        ) : (
          <div className={style.myAmount}>
            <h3>我的解答</h3>
            <div className={style.content}>{detailData.content}</div>
          </div>
        )}
      </div>
      <div className={style.mask} style={{ display: mask }}>
        <input
          type="text"
          onChange={(e) => {
            const tar = e.target;
            setValue(tar.value);
          }}
          onKeyDown={(e) => {
            if (e.keyCode === 13) {
              sendComment();
            }
          }}
        />
      </div>
    </div>
  );
};
export default Index;
